<template>
	<!--components/popup/index.wxml-->
	<!--客户报备弹框-->
	<view>
		<popupNew v-model="isShow" mode="center" :closeable="true" z-index="996" :close-icon-color="'#333333'"
			:close-icon-size="45">
			<view class="commitContainer">
				<view class="title">
					客户报备
				</view>
				<view v-if="isInputHidePhone" class="phone">
					<view class="left">
						手机号
					</view>
					<view style="margin-left: 55rpx;">
						<phoneInput :isPassword="false" v-model="addCustomerPhone" :size="7"
							@confirm="verifyCodeConfirm"></phoneInput>
					</view>
					<view class="pasteBtn" style="margin-left: 15rpx;" @click="onPasterPhoneNum">
						粘贴
					</view>
				</view>

				<view v-else class="phone">
					<view class="left">
						手机号
					</view>

					<input v-model="addCustomerPhone" type="number" maxlength="11" placeholder="请输入手机号"
						class="right rightBorder">
					</input>

					<view class="pasteBtn" @click="onPasterPhoneNum">
						粘贴
					</view>
				</view>
				<view class="name">
					<text class="left" :decode="true">
						姓&nbsp;&nbsp;&nbsp;名
					</text>
					<input v-model="addCustomerName" class="right rightBorder" placeholder="请输入姓名">

					</input>
				</view>
				<view class="name">
					<text class="left" :decode="true">
						性&nbsp;&nbsp;&nbsp;别
					</text>
					<picker :value="[addCustomerSex]" @change="onPickerPropConfirm" :range="sexList">
						<view class="right">
							{{sexList[addCustomerSex]||"请选择性别"}}
						</view>
					</picker>
				</view>
				<view v-if="isReferrer" class="name">
					<text class="left" :decode="true">
						顾&nbsp;&nbsp;&nbsp;问
					</text>
					<view class="right" @click="onSalesmanPopupProps">
						{{addCustomerSalesmanName}}
					</view>
				</view>
				<template v-if="isChannel">
					<view v-for="(item,index) in userFlagList" v-if="item.show" :key="index" class="item">
						<view class="left" style="color: #999999;">
							{{ item.name }}
						</view>

						<input v-if="item.type=='input'" class="middle" type="text" v-model="item.text"
							:placeholder="'请输入'+item.name" />
						<picker v-else :value="[item.selectIndex]" @change="onUserInfoPickerPropConfirm($event,item)"
							:range="item.pickerList">
							<view  class="middle">
								{{ item.text||"请选择" }}
							</view>
						</picker>
						<image v-if="item.type!='input'" class="right" src="/pages/shop/static/image/btn_back22.png"
							mode="">
						</image>
					</view>

				</template>
				<view class="btnWrapper">
					<view class="btn1" @click="onClear">
						重置
					</view>
					<view class="btn2" @click="onAddCustomer">
						提交
					</view>
				</view>
			</view>

		</popupNew>


		<u-popup class="listContainer" v-model="showSalesmanModal" mode="center" :borderRadius="20" :closeable="true"
			:close-icon-color="'#333333'">
			<image class="header" mode=""></image>
			<view v-for="(item,index) in salesmanCardObj.list" class="itemContainer" :key="index">
				<image class="avatar" :src="item.avatar" mode=""></image>
				<view class="middle">
					<view class="top .text-1line-ellipsis">
						{{item.name}}
					</view>
					<view class="bottom text-2line-ellipsis" style="word-wrap:break-word">
						{{item.personSignature?item.personSignature:"暂无简介"}}
					</view>
				</view>
				<view class="btn" @click="salesmanModalConfirm(item)">
					选择
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	import phoneInput from "../phoneInput/index.vue";
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let timeId = null
	let that = null
	export default {
		data() {
			return {
				isShow: false,
				hasFailureVerifyPhone: false,
				isInputHidePhone: false,
				addCustomerPhone: '',
				addCustomerName: '',
				addCustomerSex: null,
				addCustomerSexName: '点击选择性别',



				addCustomerSalesmanId: null,
				addCustomerSalesmanName: "点击选择顾问",

				isShowAllSelect: false,
				isShowCalendar: false,
				disableMask: false,
				showSexPopup: false,
				showSalesmanModal: false,


				isShowPopupPicker: false,
				curPickerList: [],

				sexList: ["女", "男", "未知"],

				userFlagList: [{
						name: '意向面积',
						key: 'intentionArea',
						type: 'picker',
						show: false,
						text: '',
						list: [{title: 1,}],
						pickerList: ["1"],
						selectIndex: "",
					},
					{
						name: '意向产品',
						key: 'intentionProduct',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
						selectIndex: "",
					},
					{
						name: '意向楼层',
						key: 'intentionFloor',
						type: 'picker',
						show: false,
						text: '',
						list: [],
						pickerList: [],
						selectIndex: "",
					},
				],

				curPickerIndex: 0,
				salesmanCardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
				},
			};
		},
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				isReferrer: state => state.userInfo.isReferrer,
				isChannel: state => state.userInfo.isChannel,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},
		components: {
			phoneInput
		},
		props: {
			value: {
				type: Boolean
			},
		},
		watch: {
			value: {
				handler: function observer(val) {
					var that = this;
					console.log("test1111111")
					that.isShow = val;
				},
				immediate: true
			},
			isShow: {
				handler: function observer(val) {
					var _this = this;
					if (_this.isShow) {
						_this.hasFailureVerifyPhone = false;
						if (_this.isChannel) {
							_this.getUserProps()
						}
					}
					this.$emit('input', val)
				},
				immediate: true
			},
			hasFailureVerifyPhone: {
				handler: function observer(val) {
					this.isInputHidePhone = this.shopInfo.hidePhone && !this.hasFailureVerifyPhone && this.isChannel
				},
				immediate: true
			}
		},
		created() {
			that = this
		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId']),
			...mapActions(['interceptorLoginInfoAuth', 'interceptorLoginPhoneAuth', 'updateUserInfo']),
			close(e) {
				let that = this
				that.isShow = false
				this.$emit('cancel');
			},
			onAddCustomer() {
				let that = this
				var postParams = {};
				for (var i in that.userFlagList) {
					if (that.userFlagList[i].show) {
						var val;
						if (that.userFlagList[i].list && that.userFlagList[i].list.length > 0) {
							val = that.filterEnable(that.userFlagList[i].list);
						} else {
							val = that.userFlagList[i].text;
						}
						postParams[that.userFlagList[i].key] = val;
					}
				}
				uni.showLoading();
				var phone = this.addCustomerPhone
				if (this.isInputHidePhone) {
					phone = this.addCustomerPhone.slice(0, 3) + '****' + this.addCustomerPhone.slice(3);
				}


				api.addCustomerHomeActivity({
					param: {
						...postParams,
						phone: phone,
						name: this.addCustomerName,
						sex: this.addCustomerSex,
						id: this.addCustomerSalesmanId,
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.addCustomerPhone = ""
						that.addCustomerName = ""
						that.addCustomerSex = null
						that.hasFailureVerifyPhone = false;
						that.isShowAddCustomer = false;
						that.addCustomerSexName = '';
						that.intendProduct = ''
						that.$emit("success")
						uni.showModal({
							title: '提示',
							content: '提交成功~~~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						if (this.isInputHidePhone && (res.code == 1000)) {
							uni.showModal({
								title: '提示',
								content: "你报备的" + phone + "的手机号已被占用，请输入完整手机验证!",
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										that.addCustomerPhone = ""
										that.hasFailureVerifyPhone = true;
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});

						} else {
							uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 3000,
							})
						}

					}
				})
				uni.hideLoading();
			},

			onClear() {
				this.addCustomerPhone = ""
				this.addCustomerName = ""
				this.addCustomerSalesmanId = ""
				this.addCustomerSalesmanName = ""
				this.addCustomerSex = ""
				this.addCustomerSexName = ""
			},

			verifyCodeConfirm(data) {
				console.log('data');
				console.log('verifyCode');
			},
			onPasterPhoneNum() {
				let that = this
				uni.getClipboardData({
					success(res) {
						//==去空格
						console.log(res.data)
						var str1 = res.data.replace(/\s*/g, "");
						var result = /^\d+$/.test(str1)

						if (result && (str1.length == 11)) {
							uni.showToast({
								title: "粘贴成功！",
								icon: "none",
								duration: 500
							})
							if (that.isInputHidePhone) {
								that.addCustomerPhone = str1.slice(0, 3) + str1.slice(7, 11)
							} else {
								that.addCustomerPhone = str1
							}

						} else {
							uni.showToast({
								title: "请复制正确的11位手机号！",
								icon: "none"
							})
						}
					}
				})

			},
			getUserProps() {
				let that = this
				api.getUserProps({
					id: null
				}).then(res => {
					console.log(res)
					if (res.success) {
						for (var i in that.userFlagList) {
							var item = that.userFlagList[i];
							var key = item.key
							var selectList = res.data[key]
							if (res.data.hasOwnProperty(key)) {
								item.show = true
							}
							var userProp = res.data.userProps[key]

							item.text = ''
							//===选项列表
							if (selectList && (item.type == 'checkbox' || item.type == "picker")) {
								item.list.splice(0, item.list.length)
								item.pickerList.splice(0, item.pickerList.length)
								for (var j in selectList) {
									var obj = selectList[j];
									//----设置是否选择
									obj.checked = false;
									for (var k in userProp) {
										if (obj.code == userProp[k]) {
											obj.checked = true;
											item.text += obj.title + ' '
										}
									}
									item.list.push(obj);
									item.pickerList.push(obj.title)
								}
							}

							if (item.type == 'input') {
								item.text = userProp || '';
							}
						}
					}
				})
			},

			filterEnable(list) {
				var tlist = []
				for (var i in list) {
					if (list[i].checked) {
						tlist.push(list[i].code)
					}
				}
				return tlist;
			},

			onPopupProps() {
				this.showSexPopup = true
			},
			onPickerPropConfirm(e) {
				this.addCustomerSex = e.detail.value;
				this.addCustomerSexName = this.sexList[this.addCustomerSex];
				this.showSexPopup = false
			},
			onSalesmanPopupProps() {
				this.showSalesmanModal = true;
				this.getSalesmanList();
			},

			salesmanModalConfirm(item) {
				this.addCustomerSalesmanName = item.name;
				this.addCustomerSalesmanId = item.id;
				this.showSalesmanModal = false;

			},

			getSalesmanList() {
				api.getSalesmanList({
					param: {

					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.clearSalesmanListShow(that.salesmanCardObj)
						that.pushSalesmanListShow(that.salesmanCardObj, res.data)
					}
				})
			},

			//----清空列表
			clearSalesmanListShow(srcObj) {
				// srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushSalesmanListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].allTimes = pushlist[i].allTimes || ''
						pushlist[i].date = pushlist[i].date || ''
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].nickname = pushlist[i].nickname || ''
						pushlist[i].introduce = pushlist[i].introduce || ''
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
				} else {
					srcObj.loadStatus = "nomore"
				}
			},


			onUserInfoPickerPropConfirm(e,item) {
				var index = e.detail.value
				item.selectIndex = index
				
				for (var i = 0; i < item.list.length; i++) {
					item.list[i].checked = false;
				}
				item.list[index].checked = true;
				item.text = item.list[index].title
			},
		}
	};
</script>


<style lang="scss">
	.commitContainer {
		width: 650rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 30rpx;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #F3F3F3;

			.left {
				margin-left: 30rpx;
				height: 40rpx;
				width: 130rpx;
				font-size: 28rpx;
				color: #3D3D3D;
				line-height: 40rpx;
				margin-right: 40rpx;
			}

			.middle {
				min-height: 40rpx;
				width: 387rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #333333;
				// word-wrap:break-word;
			}

			.right {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.title {
			// width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			color: #1F1F1F;
			line-height: 42rpx;
			margin-top: 48rpx;
			margin-bottom: 18rpx;
		}

		.phone {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 290rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				box-sizing: content-box;
				color: #333333;
				font-size: 28rpx;
			}

			.rightBorder {
				border: 1rpx solid #BBBABA;
			}

			.rightClick {
				color: #666666;
				background-color: #eeeeee;
				text-align: center;
			}

			.pasteBtn {
				background-color: #1890FF;
				color: #ffffff;
				font-size: 25rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				height: 60rpx;
				text-align: center;
				margin-left: 15px;
				border-radius: 10rpx;
				position: relative;
				z-index: 100;
			}
		}

		.name {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				box-sizing: content-box;
				line-height: 72rpx;
				border-radius: 10rpx;
				border: 1rpx solid #BBBABA;
				color: #333333;
				font-size: 28rpx;
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;
			margin-bottom: 50rpx;

			.btn1 {
				width: 240rpx;
				height: 72rpx;
				border-radius: 37rpx;
				border: 1px solid #BBBABA;
				font-size: 28rpx;
				color: #333333;
				margin-right: 90rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.btn2 {
				width: 240rpx;
				height: 72rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}
</style>